<template>
  <div class="header">
    <div class="banner">
        <div class="head">
            <img :src="imgSrc" alt="">
        </div>
        <div class="showHead">馨怡甜品，予您心怡</div>
        <router-link to="/">
            <div class="activity">
                <span>{{msg}}</span>
                <span><van-icon name="arrow" color="#ffffff"/></span>
            </div>
        </router-link>
    </div>
    <div class="login" v-if="show">
        <p>登录手机号，美好时光美味陪伴</p>
        <router-link to="/Login">
            <p><van-button type="primary" size="small" color="#ff4142">登录</van-button></p>
        </router-link>
    </div>
    <div class="content">
        <div class="myOrder">
            <div class="orderNav">
                <div>
                    <span>我的订单</span>    
                </div>
                <router-link to="/Order">
                    <div>
                        <span>查看全部订单</span>
                        <span class="next"><van-icon name="arrow" color="#b0b0b0"/></span>
                    </div>
                </router-link>
            </div>
            <div class="orderTab">
                <router-link to="/Order" v-for="(v,i) in arr" :key=i>
                    <div :class="setClass(v.cagetory)">
                        <p class="orderIcon"><van-icon :class="setClass(v.class)" /></p>
                        <p class="orderTxt">{{v.name}}</p>
                    </div>
                </router-link>
            </div>
        </div>
        <div class="myShopping setList">
            <div class="service">
                <div class="iconGroup">
                    <span><van-icon name="chat-o" /></span>
                </div>
                <div class="explain">
                    <span>客服聊天</span>
                </div>
                <div class="next">
                    <van-icon name="arrow"/>
                </div>
            </div>
            <div class="trolley">
                <div class="iconGroup">
                    <span><van-icon name="shopping-cart-o" /></span>
                </div>
                <div class="explain">
                    <span>购物车</span>
                </div>
                <div class="next">
                    <van-icon name="arrow"/>
                </div>
            </div>
        </div>
        <div class="myAddress setList">
            <router-link to="/Address">
                <div class="iconGroup">
                    <span><van-icon name="location-o" /></span>
                </div>
                <div class="explain">
                    <span>收货地址</span>
                </div>
                <div class="next">
                    <van-icon name="arrow"/>
                </div>
            </router-link>
        </div>
        <div class="myDetails setList">
            <router-link to="/PersonalInformation">
                <div class="information">
                    <div class="iconGroup">
                        <span><van-icon name="contact" /></span>
                    </div>
                    <div class="explain">
                        <span>个人信息</span>
                    </div>
                    <div class="next">
                        <van-icon name="arrow"/>
                    </div>
                </div>
            </router-link>
            <div class="setting">
                <div class="iconGroup">
                    <span><van-icon name="user-o" /></span>
                </div>
                <div class="explain">
                    <span>账号设置</span>
                </div>
                <div class="next">
                    <van-icon name="arrow"/>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="slogan">
                <p><img src="../assets/logo.png" alt=""></p>
                <p>
                    <span>欢迎您</span><br>
                    <span>Welcome</span>
                </p>
            </div>
            <div class="hint">
                <span>温馨提示：避免影响口感，请收到物品时尽快食用</span>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Icon,Button } from 'vant';
import 'vant/lib/index.css';
var img=require('../assets/head.jpg');

Vue.use(Icon);
Vue.use(Button);
export default {
    name: 'UserContent',
    data(){
        return {
        msg:'馨怡蛋糕即刻享受',
        imgSrc:img,
        show:true,
        tel:'',
        arr:[
            {class:'paid',name:'待付款',cagetory:'payment'},
            {class:'send-gift-o',name:'待发货',cagetory:'shipments'},
            {class:'logistics',name:'待收货',cagetory:'consignee'},
            {class:'comment-o',name:'待评价',cagetory:'evaluate'},
            {class:'service-o',name:'退款/售后',cagetory:'refund'},
          ]
        }
    },
    methods: {
        setClass(value) {
            let obj = {}
            obj['van-icon-'+`${value}`] = true
            return obj
        }
    },
    mounted(){
        if(this.$cookies.get('userId')){
            this.tel=this.$cookies.get('userId');
            this.show=false;
            this.axios.get('/api/getUser',{
                params:{
                    tel:this.tel
                }
            }).then((res)=> {
                // this.imgSrc=res.data.data[0].headimg;
            }).catch((error)=> {
                console.log(error);
            })
        }else{
            this.show=true;
        }
    }
}
</script>

<style scoped lang="less">
.header{
    width: 100%;
    height: auto;

    .banner{
        width: 100%;
        height: 18rem;
        background: url('../assets/banner.jpg');
        overflow: hidden;

        .head{
            width: 6rem;
            height: 6rem;
            margin: 2.5rem auto 0;
            background-size: cover;
            border-radius: 50%;
            overflow: hidden;

            img{
                width: 6rem;
                height: 6rem;
            }
        }

        .showHead{
            margin-top: 1.5rem;
            text-align: center;
            font-size: 1.4rem;
            height: 2rem;
            line-height: 2rem;
            color: #ed5051;
            font-weight: 800;
            letter-spacing: 0.1rem;
        }

        .activity{
            height: 4rem;
            width: 35rem;
            line-height: 4rem;
            background: #393430;
            border-radius: .25rem;
            color: #938e89;
            text-align: left;
            margin: 2rem auto 0;
            font-size: 1.3rem;
            letter-spacing: 0.1rem;
            text-indent: 1rem;
            position: relative;

            span{
                &:last-child{
                    position: absolute;
                    right: 1rem;
                }
            }
        }
    }

    .login{
        width: 100%;
        height: 5rem;
        background: #fff;
        line-height: 5rem;
        color: #090909;
        font-size: 1.3rem;
        display: flex;
        flex-direction: row;
        position: relative;

        p{
            margin-left: 2rem;
            letter-spacing: 0.1rem;
        }

        a{
            color: #090909;  
        }
        
        button{
            position: absolute;
            right: 2rem;
            top: 1.0rem;
            width: 6rem;
            height: 3rem;
            line-height: 3rem;
        }
    }

    .content{
        width: 35rem;
        height: 57rem;
        background: #f7f9f8;
        padding: 0 1.25rem;
        overflow: hidden;

        .myOrder{
            width: 33.5rem;
            height: 14rem;
            border-radius: .75rem;
            background: white;
            padding-left: 1.5rem;
            margin-top: 1rem;

            .orderNav{
                width: 100%;
                height: 4.5rem;
                line-height: 4.5rem;
                font-size: 1.2rem;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                border-bottom: .05rem solid #eeeeee;
                
                div{
                    &:first-child{
                        color: #343434;
                    }

                    &:last-child{
                        color: #c2c2c2;
                        position: relative;

                        span{
                            &:first-child{
                                margin-right: 4rem;
                            }
                        }
                    }
                }
            }

            .orderTab{
                width: 100%;
                height: 9.25rem;
                display: flex;
                text-align: center;
                justify-content: space-between;

                a{
                    color: #2c3e50;
                }

                div{
                    // flex:1;
                    &:last-child{
                        margin-right: 1rem;
                    }

                    .orderIcon{
                        height: 4.75rem;
                        line-height: 8rem;
                        font-size: 1.8rem;
                    }

                    .orderTxt{
                        height: 4.5rem;
                        font-size: 1.2rem;
                    }
                }
            }
        }


        .setList{
            width: 33.5rem;
            border-radius: .75rem;
            background: white;
            padding-left: 1.5rem;
            margin-top: 1rem;
            font-size: 1.25rem;
            
            a{
                color: #2c3e50;
            }

            .iconGroup{
                width: 3.5rem;
                color: #b0b0b0;
                font-size: 1.7rem;
                height: 4.5rem;
                line-height: 5rem;
            }
        }

        .myAddress{

            a{
                display: flex;
                color: #2c3e50;
            }
            
            height: 4.5rem;
            line-height: 4.5rem;
            text-align: left;
        }

        .myShopping,.myDetails{
            height: 9rem;

            div{
                display: flex;
                height: 4.5rem;
                line-height: 4.5rem;

                &:first-child{
                    border-bottom: .05rem solid #eeeeee;
                }
            }
        }

        div{
            position: relative;

            .next{
                position: absolute;
                font-size: 1.5rem;
                top: 1.5rem;
                right: 2rem;
                color: #c2c2c2;
                line-height: 0;
                color: #b0b0b0
            }
        }

        .footer{
            width: 100%;
            height: 11rem;

            .slogan{
                display: flex;
                height: 8rem;

                p{
                    flex: 1;
                    
                    &:first-child{
                        text-align: right;
                        overflow: hidden;

                        img{
                            width: 5rem;
                            height: 5rem;
                            margin-top: 1.5rem;
                            margin-right: 0.5rem;
                        }
                    }

                    &:last-child{
                        margin-top: 2.1rem;
                        text-align: left;
                        color: #f04a4e;
                        font-size: 1.5rem;
                    }
                }
            }

            .hint{
                height: 3rem;
                line-height: 3rem;
                font-size: 1.2rem;
                color: #b4b5b7;
                text-align: center;
            }
        }
    }
}
</style>
